<template>
  <div style="width: 1900px;margin: 0 auto;">
    <el-container>
      <el-aside width="200">
        <el-menu router background-color='#409EFF' style="height: 985px">
          <div style="width: 180px; height:100px;line-height: 100px;
              font-size: 24px ;color: white">
            智慧医疗HIS
          </div>
          <el-menu-item index="/admin/home" class="menuI" :id="($route.path==='/admin/home')?'menuC':''">
            <el-icon>
              <HomeFilled/>
            </el-icon>
            系统首页
          </el-menu-item>
          <el-menu-item index="/admin/appointment" class="menuI">
            <el-icon>
              <Clock/>
            </el-icon>
            预约管理
          </el-menu-item>
          <el-menu-item index="/admin/patient" class="menuI">
            <el-icon>
              <Avatar/>
            </el-icon>
            患者管理
          </el-menu-item>
          <el-menu-item index="/admin/doctor" class="menuI">
            <el-icon>
              <UserFilled/>
            </el-icon>
            医生管理
          </el-menu-item>
          <el-menu-item index="/admin/department" class="menuI">
            <el-icon>
              <Coin/>
            </el-icon>
            科室管理
          </el-menu-item>
          <el-menu-item index="/admin/schedule" class="menuI">
            <el-icon>
              <Calendar/>
            </el-icon>
            排班管理
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-card style="width: 1645px;height: 70px">
            <div style="width: 1605px">
              <el-row :gutter="10">
                <el-col :span="18"></el-col>
                <el-col :span="6">
                  <el-row :gutter="10">
                    <el-col :span="9">
                      <el-popover placement="bottom" :width="300">
                        <template #reference>
                          <el-button class="header-button">
                            <el-row :gutter="0">
                              <el-col :span="5"/>
                              <el-col :span="7">
                                <div style="padding-top: 5px">
                                  <el-icon size="30">
                                    <UserFilled/>
                                  </el-icon>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                <div
                                    style="font-size: 10px;font-weight: bold;line-height: 40px;text-align: left;width:100px">
                                </div>
                              </el-col>
                            </el-row>
                          </el-button>
                        </template>
                        <div style="font-weight: bold">用户信息</div>
                        <hr>
                      </el-popover>
                    </el-col>
                    <el-col :span="1">
                      <div class="header-background"/>
                    </el-col>
                    <el-col :span="4">
                      <el-popover placement="bottom" :width="300">
                        <template #reference>
                          <el-button class="header-button">
                            <el-icon size="30">
                              <Bell/>
                            </el-icon>
                          </el-button>
                        </template>
                      </el-popover>
                    </el-col>
                    <el-col :span="1">
                      <div class="header-background"/>
                    </el-col>
                    <el-col :span="4">
                      <el-popover placement="bottom" :width="300">
                        <template #reference>
                          <el-button class="header-button">
                            <el-icon size="30">
                              <Operation/>
                            </el-icon>
                          </el-button>
                        </template>
                      </el-popover>
                    </el-col>
                    <el-col :span="1">
                      <div class="header-background"/>
                    </el-col>
                    <el-col :span="4">
                      <el-button @click="router.push('/index')" class="header-button">
                        <el-icon size="30">
                          <SwitchButton/>
                        </el-icon>
                      </el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Avatar,
  Bell,
  Calendar,
  Clock,
  Coin,
  HomeFilled,
  Operation,
  SwitchButton,
  UserFilled
} from "@element-plus/icons-vue";
import router from "@/router";

</script>

<style scoped>
.header-background {
  width: 1px;
  height: 30px;
  background-color: rgba(233, 233, 233, 0.9);
  margin: 0 auto
}

#menuC{
  width: 180px;
  height: 80px;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 50px 0 0 50px;
  background-color: rgba(255, 255, 255, 0.9);
  color: orange;
}

.menuI {
  width: 200px;
  height: 100px;
  line-height: 100px;
  font-size: 24px;
  color: white;
  transition: all 0.5s ease-in-out;
  transition-delay: 0.1s; /* 添加延迟 */
}

.menuI.is-active {
  width: 180px;
  height: 80px;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 50px 0 0 50px;
  background-color: rgba(255, 255, 255, 0.9);
  color: orange;
}

.header-button {
  border: none;
  padding: 0;
}

.header-button:focus, .header-button:hover {
  background-color: white;
}
</style>